<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>热门活动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 700px;
				height: 400px;
				margin: 20px auto;
			}
			div ul li{
				list-style: none;
				float: left;
				margin: 10px 18px;
				font-size: 12px;
			}
			div ul li a{
				text-decoration: none;
				color: black;
			}
			h2{
				font-size: 16px;
				display: inline-block;
				margin-bottom: 20px;
			}
			.more{
				float: right;
				font-size: 16px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>热门活动</h2>
			<p class="more">更多</p>
			<ul>
				<li>
					<a href="#"><img src="img1.png"/></a>
					<p>推荐活动 |&nbsp;<a href="#">原创音乐现金榜T榜</a></p>
				</li>
				<li>
					<a href="#"><img src="img2.png"/></a>
					<p>推荐节目|&nbsp;<a href="#">《TAImusic》爆笑来袭</a></p>
				</li>
				<li>
					<a href="#"><img src="img3.png"/></a>
					<p>推荐歌单 |&nbsp;<a href="#">继续宠爱张国荣</a></p>
				</li>
				<li>
					<a href="#"><img src="img4.png"/></a>
					<p>推荐活动|&nbsp;<a href="#">330金属音乐巡演 成都小酒馆音乐空间</a></p>
				</li>
			</ul>
		</div>		
	</body>
</html>